<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<title>试驾预约</title>
 	<link rel="stylesheet" href="../../components/bootstrap/dist/css/bootstrap.min.css">  
	<link rel="stylesheet" href="../../components/datetimepicker/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="../../components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../../components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../components/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../components/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script src="../../components/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="../../js/common/common.js"></script>
    <script type="text/javascript" src="../../js/common/wechatCommon.js"></script>
    <script type="text/javascript" src="../../js/testDriveAppoint/appointment.js"></script>
</head>
<body>


<div id="myTabContent" class="tab-content">	
	<!--一级预约界面  -->
	<div id="testDriveAppointmentForm" class="container formValidate tab-pane fade" style="padding: 10px 10px 0px 10px"
	                 data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
	                 data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
	                 data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
	
		<div class="panel panel-default">
		    <div class="panel-body">
				<div class="container" >
				    <div class="row">
				         <div class="col-xs-6 col-sm-6" align="right">
					        <img src="../../images/allCar.png" width="150" height="150" class="img-responsive" alt="Generic placeholder thumbnail">
				         </div>
				         <div class="col-xs-6 col-sm-6 center-vertical" align="left" style="margin-top: 20px;">
						        <h5><span id="packageNameSpan">请选择心仪车型</span><a class="selectBrandSeries" href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></h5>
						        <input type="hidden" id="defaultBrandCode">
						        <input type="hidden" id="defaultSeriesCode">
						        <input type="hidden" id="defaultModelCode">
						        <input type="hidden" id="defaultPackageCode">
						        <p><span>指导价：27-45万</span></p>
						        <p><span>本店价：27-45万</span></p>
				         </div>
				    </div>
				
				</div>
		    </div>
		</div>
		
		
		<div class="form-group has-feedback">
		  <input type="text" id="personalName" name="personalName" style="padding: 6px 40px" 
		            class="form-control"
		            placeholder="请输入姓名"
					required
	                         data-bv-notempty-message="此项必填">
		  <span class="glyphicon glyphicon-user form-control-feedback" style="left:0;"></span>
		</div>
		
		
		<div class="form-group has-feedback">
		  <input type="text" name="phone" id="phone" style="padding: 6px 40px"
		             class="form-control" 
		             placeholder="请输入手机号码"
					required
                    data-bv-notempty-message="此项必填"
                    pattern="^1[0-9]{10}$"
                    data-bv-regexp-message="只能是数字,必须是11位且正确输入"
                    minlength="11"
                    maxlength="11"
                    data-bv-stringlength-message="长度至少是11">
		  <span class="glyphicon glyphicon-phone form-control-feedback" style="left:0;"></span>
		</div>
		
		<div class="form-group has-feedback">
		    <select id="salesConsultantId" class="form-control" style="padding: 6px 40px">
		      <option value="0">请选择您的销售顾问</option>
		      <option value="1234">顾问A</option>
		    </select>
		    <span class="glyphicon glyphicon-user form-control-feedback" style="left:0;"></span>
	    </div>
	    
	    <!-- <div class="form-group">
	        <div class="input-group date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
	            <input class="form-control" placeholder="选择到店时间" type="text" value="" readonly style="padding: 6px 40px">
			    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
		        <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
	        </div>
	    </div> -->
	    
		<div class="form-group has-feedback">
	      <input id="startDate" name="startDate" size="16" type="text" value="" 
	                     placeholder="选择到店时间" readonly class="form-control form_datetime" style="padding: 6px 40px"
				         data-bv-trigger="change"
	                     required
	                     data-bv-notempty-message="此项必填">
		  <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
		</div>
	            
	            	
		<!-- <div class="form-group has-success has-feedback">
		  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
		  <div class="input-group">
		    <span class="input-group-addon">@</span>
		    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
		  </div>
		  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
		</div>	
		
		<div class="form-group has-success has-feedback">
		  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
		  <div class="input-group">
		    <span class="input-group-addon">联系人</span>
		    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
		  </div>
		  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
		</div> -->	
		
		<div class="form-group">
		    <textarea id="appointmentContent" class="form-control" rows="3" placeholder="请输入您要提交的内容"></textarea>
	    </div>
	    
		
		<p>
		  <button id="immediatelyAppoint" type="button" class="btn btn-primary btn-block">立即预约</button>
	    </p>
		
	</div>
	
	<!--二级选择车车系页面  -->
	<div id="carModelExhibitionDiv" class="container tab-pane fade">
	</div>
	
	<!--三级选择具体车系页面  -->
	<div id="carModelExhibitionDetailDiv" class="container tab-pane fade">
			<div class="panel panel-default">
			    <div class="panel-body">
			       <div class="container">
					   <div class="row">
					      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">预约车型</div>
					      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8"><a class="againSelectBrandSeries" href="#">宝马5系<span class="glyphicon glyphicon-chevron-right"></span></a></div>      
					   </div>
				   </div>
			    </div>
			</div>
	        <h4>选择预约车型</h4>
	        <div id="carModelPackageExhibitionDiv">
	        </div>
	        
	</div>
	
	
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="testdrivingAmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" align="left">
		<!-- - <button type="button" class="close" data-dismiss="modal" 
						aria-hidden="true">×
				</butto -->
				<h4 class="modal-title">
					尊敬的车主，<span id="personalNameModal">sunrise</span>您好！
				</h4>
			</div>
			<div class="modal-body">
				已经成功接收到您的试驾预约，我们将用最优质的服务恭候光临！
			</div>
			<div class="modal-footer">
			   <center>
					<button type="button" class="btn btn-default" 
							id="modalSure">确定
					</button>
			   </center>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>